<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TechBlog - 项目展示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root {
            /* 亮色主题变量 */
            --bg-color: #ffffff;
            --text-color: #24292f;
            --border-color: #d0d7de;
            --card-bg: #f6f8fa;
            --header-bg: #f6f8fa;
            --accent-color: #0969da;
            --accent-hover: #0550ae;
            --code-bg: rgba(175, 184, 193, 0.2);
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
            --tag-bg: #ddf4ff;
            --tag-color: #0969da;
            --filter-bg: #f6f8fa;
            --input-bg: #ffffff;
            --completed-color: #28a745;
            --in-progress-color: #ffc107;
            --planned-color: #6c757d;
        }

        .dark-theme {
            /* 深色主题变量 */
            --bg-color: #0d1117;
            --text-color: #e6edf3;
            --border-color: #30363d;
            --card-bg: #161b22;
            --header-bg: #161b22;
            --accent-color: #2f81f7;
            --accent-hover: #1c6bdb;
            --code-bg: rgba(110, 118, 129, 0.4);
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.7);
            --tag-bg: #388bfd26;
            --tag-color: #58a6ff;
            --filter-bg: #161b22;
            --input-bg: #0d1117;
            --completed-color: #3fb950;
            --in-progress-color: #d29922;
            --planned-color: #8b949e;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            transition: background-color 0.3s, color 0.3s, border-color 0.3s;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
            background-color: var(--bg-color);
            color: var(--text-color);
            line-height: 1.5;
        }

        .container {
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 20px;
        }

        /* 头部导航 */
        header {
            background-color: var(--header-bg);
            border-bottom: 1px solid var(--border-color);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px 0;
            position: relative;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            font-size: 20px;
            color: var(--text-color);
            text-decoration: none;
            z-index: 101;
        }

        .logo i {
            color: var(--accent-color);
        }

        .nav-links {
            display: flex;
            gap: 24px;
        }

        .nav-links a {
            color: var(--text-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .nav-links a:hover {
            color: var(--accent-color);
        }

        .nav-links a.active {
            color: var(--accent-color);
            font-weight: 600;
        }

        .nav-actions {
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .theme-toggle {
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 8px 12px;
            color: var(--text-color);
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .theme-toggle:hover {
            background-color: var(--code-bg);
        }

        .mobile-menu {
            display: none;
            background: none;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            color: var(--text-color);
            cursor: pointer;
            padding: 8px 12px;
            font-size: 16px;
            transition: all 0.2s ease;
        }

        .mobile-menu:hover {
            background-color: var(--code-bg);
        }

        /* 主要内容区域 */
        .main-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            padding: 32px 0;
        }

        /* 标题区域 */
        .section-header {
            margin-bottom: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
        }

        .section-header h2 {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 0;
        }

        /* 项目筛选和搜索区域 */
        .projects-controls {
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            gap: 16px;
            padding: 16px;
            background-color: var(--filter-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            margin-bottom: 16px;
        }

        .search-box {
            position: relative;
            flex: 1;
            min-width: 250px;
        }

        .search-box input {
            width: 100%;
            padding: 8px 12px 8px 36px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--input-bg);
            color: var(--text-color);
            font-size: 14px;
        }

        .search-box i {
            position: absolute;
            left: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-color);
            opacity: 0.7;
        }

        .filter-controls {
            display: flex;
            gap: 12px;
            flex-wrap: wrap;
        }

        .filter-select {
            padding: 8px 12px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background-color: var(--input-bg);
            color: var(--text-color);
            font-size: 14px;
            cursor: pointer;
        }

        /* 内容容器 */
        .content-container {
            display: flex;
            gap: 32px;
            align-items: flex-start;
        }

        /* 项目列表区域 */
        .projects-section {
            flex: 1;
            min-width: 0;
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 24px;
        }

        /* 项目卡片 */
        .project-card {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            overflow: hidden;
            transition: border-color 0.2s ease, transform 0.2s ease;
            display: flex;
            flex-direction: column;
        }

        .project-card:hover {
            border-color: var(--accent-color);
            transform: translateY(-2px);
        }

        .project-image {
            width: 100%;
            height: 180px;
            object-fit: cover;
            border-bottom: 1px solid var(--border-color);
        }

        .project-content {
            padding: 20px;
            flex: 1;
            display: flex;
            flex-direction: column;
        }

        .project-title {
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 8px;
        }

        .project-title a {
            color: var(--accent-color);
            text-decoration: none;
        }

        .project-title a:hover {
            text-decoration: underline;
        }

        .project-meta {
            display: flex;
            gap: 16px;
            margin-bottom: 12px;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
            flex-wrap: wrap;
        }

        .project-status {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .status-completed {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--completed-color);
        }

        .status-in-progress {
            background-color: rgba(255, 193, 7, 0.1);
            color: var(--in-progress-color);
        }

        .status-planned {
            background-color: rgba(108, 117, 125, 0.1);
            color: var(--planned-color);
        }

        .project-tags {
            display: flex;
            gap: 8px;
            margin-bottom: 12px;
            flex-wrap: wrap;
        }

        .tag {
            background-color: var(--tag-bg);
            color: var(--tag-color);
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
        }

        .project-description {
            margin-bottom: 16px;
            font-size: 14px;
            line-height: 1.6;
            flex: 1;
        }

        .project-links {
            display: flex;
            gap: 12px;
            margin-top: auto;
        }

        .project-link {
            display: inline-flex;
            align-items: center;
            gap: 4px;
            color: var(--accent-color);
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: all 0.2s ease;
        }

        .project-link:hover {
            text-decoration: underline;
            gap: 6px;
        }

        /* 侧边栏 */
        .sidebar {
            width: 300px;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 24px;
        }

        /* 侧边栏区块 */
        .sidebar-section {
            background-color: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 6px;
            padding: 16px;
        }

        .sidebar-section h3 {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .about-me {
            display: flex;
            flex-direction: column;
            align-items: center;
            text-align: center;
        }

        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin-bottom: 12px;
            border: 2px solid var(--border-color);
        }

        .social-links {
            display: flex;
            gap: 12px;
            margin-top: 12px;
        }

        .social-links a {
            color: var(--text-color);
            font-size: 18px;
            transition: color 0.2s ease;
        }

        .social-links a:hover {
            color: var(--accent-color);
        }

        .categories-list,
        .tags-list {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .categories-list a,
        .tags-list a {
            background-color: var(--code-bg);
            color: var(--text-color);
            padding: 4px 8px;
            border-radius: 6px;
            text-decoration: none;
            font-size: 12px;
            transition: all 0.2s ease;
        }

        .categories-list a:hover,
        .tags-list a:hover {
            background-color: var(--accent-color);
            color: white;
        }

        /* 分页样式 */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 8px;
            margin-top: 32px;
        }

        .pagination a,
        .pagination span {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 32px;
            height: 32px;
            padding: 0 8px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            text-decoration: none;
            color: var(--text-color);
            font-size: 14px;
            transition: all 0.2s ease;
        }

        .pagination a:hover {
            background-color: var(--code-bg);
            border-color: var(--accent-color);
        }

        .pagination .current {
            background-color: var(--accent-color);
            color: white;
            border-color: var(--accent-color);
        }

        .pagination .disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* 页脚 */
        footer {
            border-top: 1px solid var(--border-color);
            padding: 32px 0;
            text-align: center;
            font-size: 14px;
            color: var(--text-color);
            opacity: 0.8;
        }

        /* 响应式设计优化 */
        @media (max-width: 1024px) {
            .content-container {
                gap: 24px;
            }

            .sidebar {
                width: 250px;
            }

            .projects-section {
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        @media (max-width: 900px) {
            .content-container {
                flex-direction: column;
            }

            .sidebar {
                width: 100%;
                order: -1;
                margin-bottom: 0;
            }

            .sidebar-section {
                padding: 20px;
            }
        }

        @media (max-width: 768px) {
            .container {
                padding: 0 16px;
            }

            .navbar {
                padding: 12px 0;
            }

            .logo {
                font-size: 18px;
            }

            .nav-links {
                position: absolute;
                top: 100%;
                left: 0;
                width: 100%;
                background-color: var(--header-bg);
                border-top: 1px solid var(--border-color);
                flex-direction: column;
                padding: 16px 20px;
                display: none;
                box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            }

            .nav-links.active {
                display: flex;
            }

            .nav-links a {
                padding: 12px 0;
                border-bottom: 1px solid var(--border-color);
                font-size: 16px;
            }

            .nav-links a:last-child {
                border-bottom: none;
            }

            .mobile-menu {
                display: block;
                min-height: 44px;
                min-width: 44px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .theme-toggle,
            .mobile-menu {
                padding: 10px 14px;
            }

            .main-content {
                padding: 24px 0;
                gap: 20px;
            }

            .content-container {
                gap: 20px;
            }

            .section-header {
                flex-direction: column;
                align-items: flex-start;
            }

            .section-header h2 {
                font-size: 20px;
            }

            .projects-controls {
                flex-direction: column;
                align-items: stretch;
            }

            .search-box {
                min-width: 100%;
            }

            .filter-controls {
                width: 100%;
                justify-content: space-between;
            }

            .projects-section {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .project-content {
                padding: 16px;
            }

            .project-title {
                font-size: 16px;
            }

            .project-meta {
                flex-wrap: wrap;
                gap: 8px;
                font-size: 13px;
            }

            .sidebar-section {
                padding: 16px;
            }

            .avatar {
                width: 60px;
                height: 60px;
            }

            .project-link,
            .categories-list a,
            .tags-list a {
                padding: 8px 12px;
                font-size: 14px;
            }

            /* 减少移动端的动画效果 */
            * {
                transition: none;
            }

            /* 保留必要的过渡 */
            .theme-toggle,
            .mobile-menu,
            .nav-links a,
            .project-link {
                transition: all 0.2s ease;
            }
        }

        @media (max-width: 480px) {
            .project-meta {
                flex-direction: column;
                gap: 4px;
            }

            .project-tags {
                gap: 6px;
            }

            .categories-list,
            .tags-list {
                gap: 6px;
            }

            .container {
                padding: 0 12px;
            }

            .content-container {
                gap: 16px;
            }

            .pagination {
                flex-wrap: wrap;
            }
        }

        @media (max-height: 500px) and (orientation: landscape) {
            .navbar {
                padding: 8px 0;
            }

            .main-content {
                padding: 16px 0;
            }

            .project-content {
                padding: 12px;
            }
        }
    </style>
</head>

<body class="light-theme">
    <header>
        <div class="container">
            <nav class="navbar">
                <a href="index.html" class="logo">
                    <i class="fas fa-code"></i>
                    TechBlog
                </a>

                <div class="nav-links">
                    <a href="index.html">首页</a>
                    <a href="article-list.html">文章</a>
                    <a href="tutorial-list.html">教程</a>
                    <a href="projects.html" class="active">项目</a>
                    <a href="about.html">关于</a>
                </div>

                <div class="nav-actions">
                    <button class="theme-toggle" id="themeToggle">
                        <i class="fas fa-moon"></i>
                        <span>深色模式</span>
                    </button>
                    <button class="mobile-menu" id="mobileMenu">
                        <i class="fas fa-bars"></i>
                    </button>
                </div>
            </nav>
        </div>
    </header>

    <div class="container">
        <div class="main-content">
            <!-- 标题区域 -->
            <div class="section-header">
                <h2>项目展示</h2>
                <div class="projects-info">
                    <span>共 <strong id="projectCount">8</strong> 个项目</span>
                </div>
            </div>

            <!-- 项目筛选和搜索区域 -->
            <div class="projects-controls">
                <div class="search-box">
                    <i class="fas fa-search"></i>
                    <input type="text" id="searchInput" placeholder="搜索项目...">
                </div>
                <div class="filter-controls">
                    <select class="filter-select" id="categoryFilter">
                        <option value="">所有分类</option>
                        <option value="前端">前端</option>
                        <option value="后端">后端</option>
                        <option value="全栈">全栈</option>
                        <option value="移动端">移动端</option>
                        <option value="桌面应用">桌面应用</option>
                        <option value="开源工具">开源工具</option>
                    </select>
                    <select class="filter-select" id="statusFilter">
                        <option value="">所有状态</option>
                        <option value="completed">已完成</option>
                        <option value="in-progress">进行中</option>
                        <option value="planned">计划中</option>
                    </select>
                    <select class="filter-select" id="techFilter">
                        <option value="">所有技术</option>
                        <option value="React">React</option>
                        <option value="Vue">Vue</option>
                        <option value="Node.js">Node.js</option>
                        <option value="Python">Python</option>
                        <option value="TypeScript">TypeScript</option>
                        <option value="MongoDB">MongoDB</option>
                    </select>
                    <select class="filter-select" id="sortSelect">
                        <option value="newest">最新发布</option>
                        <option value="oldest">最早发布</option>
                        <option value="popular">最多星标</option>
                    </select>
                </div>
            </div>

            <!-- 侧边栏和项目列表放在同一个flex容器中 -->
            <div class="content-container">
                <main class="projects-section">
                    <!-- 项目卡片 1 -->
                    <article class="project-card" data-category="全栈" data-status="completed"
                        data-tech="React,Node.js,MongoDB" data-date="2023-10-25" data-stars="42">
                        <img src="https://images.unsplash.com/photo-1555066931-4365d14bab8c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
                            alt="代码编辑器项目" class="project-image">
                        <div class="project-content">
                            <h3 class="project-title">
                                <a href="project-detail.html">CodeCollab - 实时协作代码编辑器</a>
                            </h3>
                            <div class="project-meta">
                                <span><i class="far fa-calendar"></i> 2023-10-25</span>
                                <span><i class="far fa-star"></i> 42 星标</span>
                                <span class="project-status status-completed"><i class="fas fa-check-circle"></i>
                                    已完成</span>
                            </div>
                            <div class="project-tags">
                                <span class="tag">React</span>
                                <span class="tag">Node.js</span>
                                <span class="tag">MongoDB</span>
                                <span class="tag">Socket.io</span>
                            </div>
                            <p class="project-description">
                                一个基于Web的实时协作代码编辑器，支持多人同时编辑、语法高亮和实时聊天功能。使用Operational Transformations解决冲突问题。
                            </p>
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fab fa-github"></i> 源码</a>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 2 -->
                    <article class="project-card" data-category="前端" data-status="completed" data-tech="Vue,TypeScript"
                        data-date="2023-09-18" data-stars="28">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
                            alt="数据可视化项目" class="project-image">
                        <div class="project-content">
                            <h3 class="project-title">
                                <a href="project-detail.html">DataViz - 交互式数据可视化平台</a>
                            </h3>
                            <div class="project-meta">
                                <span><i class="far fa-calendar"></i> 2023-09-18</span>
                                <span><i class="far fa-star"></i> 28 星标</span>
                                <span class="project-status status-completed"><i class="fas fa-check-circle"></i>
                                    已完成</span>
                            </div>
                            <div class="project-tags">
                                <span class="tag">Vue 3</span>
                                <span class="tag">TypeScript</span>
                                <span class="tag">D3.js</span>
                                <span class="tag">数据可视化</span>
                            </div>
                            <p class="project-description">
                                一个强大的数据可视化平台，支持多种图表类型和数据源。用户可以上传CSV/JSON数据，创建交互式仪表板并分享给他人。
                            </p>
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fab fa-github"></i> 源码</a>
                                <a href="#" class="project-link"><i class="fas fa-external-link-alt"></i> 演示</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 3 -->
                    <article class="project-card" data-category="后端" data-status="in-progress"
                        data-tech="Python,Flask,PostgreSQL" data-date="2023-11-05" data-stars="15">
                        <img src="https://images.unsplash.com/photo-1558494949-ef010cbdcc31?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1174&q=80"
                            alt="API项目" class="project-image">
                        <div class="project-content">
                            <h3 class="project-title">
                                <a href="project-detail.html">TaskFlow - 任务管理API服务</a>
                            </h3>
                            <div class="project-meta">
                                <span><i class="far fa-calendar"></i> 2023-11-05</span>
                                <span><i class="far fa-star"></i> 15 星标</span>
                                <span class="project-status status-in-progress"><i class="fas fa-sync-alt"></i>
                                    进行中</span>
                            </div>
                            <div class="project-tags">
                                <span class="tag">Python</span>
                                <span class="tag">Flask</span>
                                <span class="tag">PostgreSQL</span>
                                <span class="tag">REST API</span>
                            </div>
                            <p class="project-description">
                                一个功能完整的任务管理API，支持用户认证、任务创建、分配、跟踪和报告功能。提供完整的RESTful API文档和测试用例。
                            </p>
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fab fa-github"></i> 源码</a>
                                <a href="#" class="project-link"><i class="fas fa-book"></i> 文档</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 4 -->
                    <article class="project-card" data-category="开源工具" data-status="completed"
                        data-tech="JavaScript,Node.js" data-date="2023-08-12" data-stars="67">
                        <img src="https://images.unsplash.com/photo-1611224923853-80b023f02d71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1139&q=80"
                            alt="开发工具项目" class="project-image">
                        <div class="project-content">
                            <h3 class="project-title">
                                <a href="project-detail.html">DevUtils - 开发者实用工具集</a>
                            </h3>
                            <div class="project-meta">
                                <span><i class="far fa-calendar"></i> 2023-08-12</span>
                                <span><i class="far fa-star"></i> 67 星标</span>
                                <span class="project-status status-completed"><i class="fas fa-check-circle"></i>
                                    已完成</span>
                            </div>
                            <div class="project-tags">
                                <span class="tag">Node.js</span>
                                <span class="tag">CLI工具</span>
                                <span class="tag">开源</span>
                                <span class="tag">开发者工具</span>
                            </div>
                            <p class="project-description">
                                一个命令行工具集，包含代码格式化、文件处理、API测试、数据转换等常用功能。旨在提高开发者的工作效率。
                            </p>
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fab fa-github"></i> 源码</a>
                                <a href="#" class="project-link"><i class="fas fa-download"></i> 下载</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 5 -->
                    <article class="project-card" data-category="移动端" data-status="in-progress"
                        data-tech="React Native,Firebase" data-date="2023-10-30" data-stars="23">
                        <img src="https://images.unsplash.com/photo-1512941937669-90a1b58e7e9c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
                            alt="移动应用项目" class="project-image">
                        <div class="project-content">
                            <h3 class="project-title">
                                <a href="project-detail.html">FitTrack - 健康与健身追踪应用</a>
                            </h3>
                            <div class="project-meta">
                                <span><i class="far fa-calendar"></i> 2023-10-30</span>
                                <span><i class="far fa-star"></i> 23 星标</span>
                                <span class="project-status status-in-progress"><i class="fas fa-sync-alt"></i>
                                    进行中</span>
                            </div>
                            <div class="project-tags">
                                <span class="tag">React Native</span>
                                <span class="tag">Firebase</span>
                                <span class="tag">移动应用</span>
                                <span class="tag">健康</span>
                            </div>
                            <p class="project-description">
                                一款跨平台健康追踪应用，支持记录运动数据、饮食摄入、睡眠质量等。提供个性化建议和进度可视化。
                            </p>
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fab fa-github"></i> 源码</a>
                                <a href="#" class="project-link"><i class="fab fa-app-store"></i> App Store</a>
                            </div>
                        </div>
                    </article>

                    <!-- 项目卡片 6 -->
                    <article class="project-card" data-category="前端" data-status="planned" data-tech="Vue,TypeScript"
                        data-date="2023-12-01" data-stars="0">
                        <img src="https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80"
                            alt="计划中的项目" class="project-image">
                        <div class="project-content">
                            <h3 class="project-title">
                                <a href="project-detail.html">PortfolioBuilder - 在线作品集生成器</a>
                            </h3>
                            <div class="project-meta">
                                <span><i class="far fa-calendar"></i> 计划中</span>
                                <span><i class="far fa-star"></i> 0 星标</span>
                                <span class="project-status status-planned"><i class="far fa-clock"></i> 计划中</span>
                            </div>
                            <div class="project-tags">
                                <span class="tag">Vue 3</span>
                                <span class="tag">TypeScript</span>
                                <span class="tag">Tailwind CSS</span>
                                <span class="tag">作品集</span>
                            </div>
                            <p class="project-description">
                                一个在线工具，帮助开发者快速创建专业的作品集网站。提供多种模板、自定义选项和一键部署功能。
                            </p>
                            <div class="project-links">
                                <a href="#" class="project-link"><i class="fas fa-lightbulb"></i> 构思中</a>
                            </div>
                        </div>
                    </article>
                </main>

                <aside class="sidebar">
                    <div class="sidebar-section about-me">
                        <img src="https://avatars.githubusercontent.com/u/583231?v=4" alt="Avatar" class="avatar">
                        <h3>关于作者</h3>
                        <p>全栈开发者，专注于现代Web技术。热爱开源，喜欢分享技术知识。</p>
                        <div class="social-links">
                            <a href="#"><i class="fab fa-github"></i></a>
                            <a href="#"><i class="fab fa-twitter"></i></a>
                            <a href="#"><i class="fab fa-linkedin"></i></a>
                            <a href="#"><i class="fas fa-envelope"></i></a>
                        </div>
                    </div>

                    <div class="sidebar-section">
                        <h3>项目分类</h3>
                        <div class="categories-list">
                            <a href="#" data-category="前端">前端</a>
                            <a href="#" data-category="后端">后端</a>
                            <a href="#" data-category="全栈">全栈</a>
                            <a href="#" data-category="移动端">移动端</a>
                            <a href="#" data-category="桌面应用">桌面应用</a>
                            <a href="#" data-category="开源工具">开源工具</a>
                        </div>
                    </div>

                    <div class="sidebar-section">
                        <h3>项目状态</h3>
                        <div class="tags-list">
                            <a href="#" data-status="completed">已完成</a>
                            <a href="#" data-status="in-progress">进行中</a>
                            <a href="#" data-status="planned">计划中</a>
                        </div>
                    </div>

                    <div class="sidebar-section">
                        <h3>热门技术标签</h3>
                        <div class="tags-list">
                            <a href="#" data-tech="React">React</a>
                            <a href="#" data-tech="Vue">Vue</a>
                            <a href="#" data-tech="Node.js">Node.js</a>
                            <a href="#" data-tech="Python">Python</a>
                            <a href="#" data-tech="TypeScript">TypeScript</a>
                            <a href="#" data-tech="MongoDB">MongoDB</a>
                            <a href="#" data-tech="PostgreSQL">PostgreSQL</a>
                            <a href="#" data-tech="Firebase">Firebase</a>
                        </div>
                    </div>
                </aside>
            </div>

            <!-- 分页 -->
            <div class="pagination">
                <a href="#" class="disabled"><i class="fas fa-chevron-left"></i></a>
                <a href="#" class="current">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <span>...</span>
                <a href="#">8</a>
                <a href="#"><i class="fas fa-chevron-right"></i></a>
            </div>
        </div>
    </div>

    <footer>
        <div class="container">
            <p>&copy; 2023 TechBlog. 保留所有权利。</p>
            <p>本网站仅用于学习和演示目的。</p>
        </div>
    </footer>

    <script>
        // 主题切换功能
        const themeToggle = document.getElementById('themeToggle');
        const body = document.body;
        const themeIcon = themeToggle.querySelector('i');
        const themeText = themeToggle.querySelector('span');

        // 检查本地存储的主题偏好
        if (localStorage.getItem('theme') === 'dark') {
            body.classList.add('dark-theme');
            themeIcon.classList.remove('fa-moon');
            themeIcon.classList.add('fa-sun');
            themeText.textContent = '浅色模式';
        }

        themeToggle.addEventListener('click', () => {
            body.classList.toggle('dark-theme');

            if (body.classList.contains('dark-theme')) {
                themeIcon.classList.remove('fa-moon');
                themeIcon.classList.add('fa-sun');
                themeText.textContent = '浅色模式';
                localStorage.setItem('theme', 'dark');
            } else {
                themeIcon.classList.remove('fa-sun');
                themeIcon.classList.add('fa-moon');
                themeText.textContent = '深色模式';
                localStorage.setItem('theme', 'light');
            }
        });

        // 移动端菜单切换
        const mobileMenu = document.getElementById('mobileMenu');
        const navLinks = document.querySelector('.nav-links');

        mobileMenu.addEventListener('click', () => {
            navLinks.classList.toggle('active');

            // 切换菜单图标
            const icon = mobileMenu.querySelector('i');
            if (navLinks.classList.contains('active')) {
                icon.classList.remove('fa-bars');
                icon.classList.add('fa-times');
            } else {
                icon.classList.remove('fa-times');
                icon.classList.add('fa-bars');
            }
        });

        // 项目筛选功能
        const searchInput = document.getElementById('searchInput');
        const categoryFilter = document.getElementById('categoryFilter');
        const statusFilter = document.getElementById('statusFilter');
        const techFilter = document.getElementById('techFilter');
        const sortSelect = document.getElementById('sortSelect');
        const projectCards = document.querySelectorAll('.project-card');
        const projectCount = document.getElementById('projectCount');

        // 更新项目计数
        function updateProjectCount() {
            const visibleProjects = document.querySelectorAll('.project-card:not([style*="display: none"])');
            projectCount.textContent = visibleProjects.length;
        }

        // 筛选项目
        function filterProjects() {
            const searchTerm = searchInput.value.toLowerCase();
            const categoryValue = categoryFilter.value;
            const statusValue = statusFilter.value;
            const techValue = techFilter.value;

            projectCards.forEach(card => {
                const title = card.querySelector('.project-title').textContent.toLowerCase();
                const description = card.querySelector('.project-description').textContent.toLowerCase();
                const category = card.getAttribute('data-category');
                const status = card.getAttribute('data-status');
                const tech = card.getAttribute('data-tech');

                const matchesSearch = searchTerm === '' ||
                    title.includes(searchTerm) ||
                    description.includes(searchTerm);

                const matchesCategory = categoryValue === '' || category === categoryValue;
                const matchesStatus = statusValue === '' || status === statusValue;
                const matchesTech = techValue === '' || tech.includes(techValue);

                if (matchesSearch && matchesCategory && matchesStatus && matchesTech) {
                    card.style.display = 'flex';
                } else {
                    card.style.display = 'none';
                }
            });

            updateProjectCount();
        }

        // 排序项目
        function sortProjects() {
            const sortValue = sortSelect.value;
            const projectsSection = document.querySelector('.projects-section');
            const cardsArray = Array.from(projectCards);

            cardsArray.sort((a, b) => {
                if (sortValue === 'newest') {
                    return new Date(b.getAttribute('data-date')) - new Date(a.getAttribute('data-date'));
                } else if (sortValue === 'oldest') {
                    return new Date(a.getAttribute('data-date')) - new Date(b.getAttribute('data-date'));
                } else if (sortValue === 'popular') {
                    return parseInt(b.getAttribute('data-stars')) - parseInt(a.getAttribute('data-stars'));
                }
                return 0;
            });

            // 重新添加排序后的项目
            cardsArray.forEach(card => {
                projectsSection.appendChild(card);
            });
        }

        // 添加事件监听器
        searchInput.addEventListener('input', filterProjects);
        categoryFilter.addEventListener('change', filterProjects);
        statusFilter.addEventListener('change', filterProjects);
        techFilter.addEventListener('change', filterProjects);
        sortSelect.addEventListener('change', sortProjects);

        // 侧边栏分类和标签筛选
        document.querySelectorAll('.categories-list a, .tags-list a').forEach(link => {
            link.addEventListener('click', (e) => {
                e.preventDefault();

                if (link.hasAttribute('data-category')) {
                    categoryFilter.value = link.getAttribute('data-category');
                } else if (link.hasAttribute('data-status')) {
                    statusFilter.value = link.getAttribute('data-status');
                } else if (link.hasAttribute('data-tech')) {
                    techFilter.value = link.getAttribute('data-tech');
                }

                filterProjects();
            });
        });

        // 初始化项目计数
        updateProjectCount();
    </script>
</body>

</html>